<template>
  <!-- 最新曝光台 -->
  <div class="exposure-container" ref="container">
    <ul
      ref="listContainer"
      class="exposure"
    >
      <li
        v-for="(item, index) in list"
        :key="index"
      >
        <el-row class="header-wrap">
          <el-col :span="19">
            <el-col :span="18" class="title">
              {{item.websitename}}
            </el-col>
            <el-col :span="6" class="date">
              {{item.create_time | parseTime}}
            </el-col>
            <el-col :span="24" class="content">
              {{item.reson}}
            </el-col>
          </el-col>
          <el-col :span="5" class="money">
            {{item.money}}元
          </el-col>
        </el-row>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeExposure',
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$api.getReportList().then(data => {
        if (!data.length) {
          return;
        }
        this.list.push(...data);
      });
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global';
  .exposure-container {
    margin-top: 10px;
    height: 588px;
    overflow: auto;
    .exposure {
      background-color: #fff;
      li {
        margin: 0 20px 0 20px;
        padding-bottom: 10px;
        color: #666;
        border-bottom: 1px dashed #ddd;
        &:last-child,
        &:nth-last-of-type(2) {
          border: 0;
        }
        .title {
          line-height: 30px;
          font-weight: bold;
          color: #333;
        }
        .date {
          line-height: 30px;
          text-align: right;
        }
        .content {
          height: 40px;
          line-height: 20px;
          font-size: 12px;
          overflow: hidden;
        }
        .money {
          line-height: 70px;
          font-size: 20px;
          text-align: right;
          color: #2c81ff;
        }
      }
    }
  }
</style>
